<!--  -->
<template>
  <div class=''>
    <h2>首页面</h2>
    <ul>
      <li>   
         <router-link :to="{path:'/home/a'}">A页面</router-link>
      </li>
      <li>   
         <router-link to="/home/a?id=1&name=张三">A页面</router-link>
      </li>
      <li>    
        <router-link :to="{
          name:'A',
          query:{
            id:'2',
            name:'李四',
            },
          }">A页面</router-link>
        <li>    
        <router-link to="/home/b/3/王五">B页面</router-link>
      </li>
      </li>
      <li>    
        <router-link :to="{name:'B',params:{id:'4',name:'赵四'},}">B页面</router-link>
      </li>
      <li>    
        <router-link :to="{name:'C'}">c页面</router-link>
      </li>
      <li>    
        <router-link  :to="{
          name:'C',
          params:{
            id:'7',
            name:'嘿嘿',
            },
            query:{
              age:'18'
            }
          }">c页面</router-link>
      </li>
    </ul>
    <router-view></router-view>
    <input type="text">
  </div>
</template>

<script>

export default {
  name: 'home',
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {

      };
    },
}
</script>
<style lang='less' scoped>
  //@import url(); 引入公共css类

</style>